<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="keywords"
        content="富文本编辑器、树形列表、树形控件、树控件、手风琴、拾色器、多文件上传、弹窗组件、模态窗口、双向联动表单、右键菜单、jquery拖动、draggable、datagrid、tree、mvvm、combox、tab" />
    <meta name="description"
        content="Bui editor ui框架是一套前后端分离，包含富文本编辑器、双向联动表单、树形列表、树形控件、模态窗口、手风琴、拾色器、多文件上传、弹窗组件等全功能UI框架。还包括Spring mvc spring mybatis高效开发框架" />
    <link rel="shortcut icon" href="/favicon.ico" />
    <link rel="bookmark" href="/favicon.ico" />
    <meta name="renderer" content="webkit|ie-stand" />
    <link type="text/css" rel="stylesheet" lang="stylesheet" href="../theme/default/base.css" />
    <link type="text/css" rel="stylesheet" lang="stylesheet" href="../theme/default/toolbar.css" />
    <link type="text/css" rel="stylesheet" lang="stylesheet" href="../theme/default/panel.css" />
    <link type="text/css" rel="stylesheet" lang="stylesheet" href="../theme/default/tabs.css" />
    <link type="text/css" rel="stylesheet" lang="stylesheet" href="../theme/default/tree.css" />
    <link type="text/css" rel="stylesheet" lang="stylesheet" href="../theme/font/bui-fonts.min.css" />
    <script type="text/javascript" src="../javascript/basic-2.0.0.js"></script>
    <script type="text/javascript" src="../javascript/plugins-2.0.0.js"></script>
    <script type="text/javascript" src="../javascript/tabs-2.0.0.js"></script>
    <script type="text/javascript" src="../javascript/tree-2.0.0.js"></script>
    <script type="text/javascript" src="../javascript/toolbar-2.0.0.js"></script>
    <script type="text/javascript" src="../javascript/panel-2.0.0.js"></script>
    <script type="text/javascript" src="lang_config.js"></script>
    <style>
        #wrap {
            width: 100%;
            height: 100%;
            padding: 10px 10px;
        }
        #wrap > div{
            border-bottom: 1px solid #ccc;
        }
        #toolbar a{
            padding: 3px 6px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div id="wrap" class="k_box_size">
        <div id="toolbar" style="padding:6px 0px;"><a onclick="addFn()">添加</a><a onclick="deleteFn()">删除</a></div>
        <div id="tab1" style="height: 250px;border-bottom: 1px solid #ccc;">

        </div>
        <div id="tab2" style="height: 250px;border-bottom: 1px solid #ccc;">

        </div>
        <div id="tab3" style="height: 250px;border-bottom: 1px solid #ccc;">

        </div> 
        <div id="tab4" style="height: 250px;border-bottom: 1px solid #ccc;">

        </div>
    </div>

    <script type="text/javascript">
        var tab1, tab2, tab3,tab4, treeObj1,treeObj2,treeObj3,treeObj4;
        var id = 99;
        function addFn(){
            id++;
            let opt = {
                // fixed:true,
                id:'new'+id,
                text: "新tab"+id,
                iconCls: 'fa-user'               
            };
            if(id % 2 === 0){
                opt.content= '<p style="color:red">新的TAB '+id+'</p>';
            }else{
                opt.url = 'fragment.html';
            }
            tab1.add(opt);
        }
        function deleteFn(){
            console.log("exe delete");
            let $c = $B.DomUtils.createEl('<div><p style="padding-top:20px;padding-bottom:20px;"><span style="padding:12px 12px;">ID/标题</span><span style="padding:12px 12px;"><input id="idorname" type="text" style="width:200px;"/></span></p><div>');
            $B.confirm({               
                title:'请输入Tab ID或者Tab标题',
                okText:'删除',
                content:$c,
                okFn:function(){
                    console.log(this);
                    let $in = $B.DomUtils.findbyId($c,"idorname");
                    let v = $in.value;
                    if(v !== ""){
                        tab1.delete(v);
                    }
                },
                noFn:function(){

                }
            });
        }
        var clickFn = function (e) {
            console.log(e);
        };
        var tabs = [{
            // fixed:true,
            id:'0001',
            text: "用户管理",
            iconCls: 'fa-user',
            content: '<p style="color:red">用户管理</p>'
        }, {
            id:'0002',
            text: "机构管理",
            iconCls: 'fa-sitemap',
            url: 'fragment.html'
        }, {
            id:'0003',
            text: "角色管理",
            // iconCls: 'fa-address-card-o',
            url: 'resize.html',  //resize.html fullpage
            dataType: 'iframe'
        }, {
            id:'0004',
            text: "菜单管理",
            iconCls: 'fa-list-bullet',
            url: 'tree.json',
            dataType: 'json'
        },{
            id:'0005',
            text: "自定义Tab6",
            iconCls: 'fa-user',
            content: '<p style="color:red">自定义Tab66666</p>'
        },{
            id:'0007',
            text: "自定义Tab7",
            iconCls: 'fa-user',
            content: '<p style="color:red">自定义T让他让他也让他有ab66666</p>'
        },{
            id:'0008',
            text: "自定义Tab8",
            iconCls: 'fa-user',
            content: '<p style="color:red">自定义try让他Tab66666</p>'
        },{
            id:'0009',
            text: "自定义Tab9",
            iconCls: 'fa-user',
            content: '<p style="color:red">自定义Tab6规划局规划局6666</p>'
        },{
            id:'00010',
            text: "自定义Tab61",
            iconCls: 'fa-user',
            content: '<p style="color:red">自定义Tab66玩儿玩儿玩儿666</p>'
        },{
            id:'00011',
            text: "自定义Tab62",
            iconCls: 'fa-user',
            content: '<p style="color:red">自定义Tab6味儿微微儿6666</p>'
        },{
            id:'00012',
            text: "自定义Tab63",
            iconCls: 'fa-user',
            content: '<p style="color:red">自定义Tab66任务热666</p>'
        }];
        
        function pageLoaded() {
            tab1 = new $B["Tabs"]("tab1", {
                style: 'plain',  //plain简约风格，normal常规风格，card卡片风格
                headSize: '35px',
                closeable:true,
                haverClose:true,
                animate:true,
                reload: false,
                position: "top",
                onClick: function (prs) {
                    console.log(prs);
                },
                onLoaded: function (opt, datas) {
                    let el = this;
                    if (opt.dataType === "json") {
                        if (treeObj1) {
                            treeObj1.destroy();
                        }
                        el.innerHTML = "<div><ul/></div>";
                        let ul = el.firstChild.firstChild;
                        treeObj1 = new $B.Tree(ul, {
                            data: datas,
                            url: 'tree.json',                          
                            onClick: function (e) {
                                console.log("on click");
                                console.log(e.data);
                            },
                            onChecked: function (data, ischecked) {
                                console.log("onChecked ");
                                console.log(JSON.stringify(data));
                            }
                        });
                    }
                },
                tabs: tabs
            });
            var tabArr = $B.cloneObjectFn(tabs);
            tabArr[1].actived = true;
            tab2 = new $B["Tabs"]("tab2", {
                style: 'normal',  //plain简约风格，normal常规风格，card卡片风格
                headSize: '35px',
                position: "bottom",
                closeable:true,
                headerBackColor:"#F7F7FC",
                onClick: function (prs) {
                    console.log(prs);
                },
                onLoaded: function (opt, datas) {
                    let el = this;
                    if (opt.dataType === "json") {
                        if (treeObj2) {
                            treeObj2.destroy();
                        }
                        el.innerHTML = "<div><ul/></div>";
                        let ul = el.firstChild.firstChild;
                        treeObj2 = new $B.Tree(ul, {
                            data: datas,
                            url: 'tree.json',    
                            nodeParentIcon: 'fa-folder-empty',//父节点图标关闭状态
                            nodeParentOpenIcon: 'fa-folder-open-empty',      //打开状态图标
                            leafNodeIcon: 'fa-mail-alt',                //子节点图标 
                            chkEmptyIcon: 'fa-check-empty',            //不选
                            chkAllIcon: 'fa-check',            //全选
                            chkSomeIcon: 'fa-minus-squared',              //部分选 ***/                      
                            onClick: function (e) {
                                console.log("on click");
                                console.log(e.data);
                            },
                            onChecked: function (data, ischecked) {
                                console.log("onChecked ");
                                console.log(JSON.stringify(data));
                            }
                        });
                    }
                },
                tabs: tabArr
            });
            tabArr = $B.cloneObjectFn(tabs);
            tabArr[2].actived = true;
            tab3 = new $B["Tabs"]("tab3", {
                style: 'plain',  //plain简约风格，normal常规风格，card卡片风格
                headSize: '110px',
                position: "right",
                onClick: function (prs) {
                    console.log(prs);
                },
                tabs: tabArr,
                onLoaded: function (opt, datas) {
                    let el = this;
                    if (opt.dataType === "json") {
                        if (treeObj3) {
                            treeObj3.destroy();
                        }
                        el.innerHTML = "<div><ul/></div>";
                        let ul = el.firstChild.firstChild;
                        treeObj3 = new $B.Tree(ul, {
                            data: datas,
                            url: 'tree.json',    
                            nodeParentIcon: 'fa-folder-empty',//父节点图标关闭状态
                            nodeParentOpenIcon: 'fa-folder-open-empty',      //打开状态图标
                            leafNodeIcon: 'fa-mail-alt',                //子节点图标 
                            chkEmptyIcon: 'fa-check-empty',            //不选
                            chkAllIcon: 'fa-check',            //全选
                            chkSomeIcon: 'fa-minus-squared',              //部分选 ***/                      
                            onClick: function (e) {
                                console.log("on click");
                                console.log(e.data);
                            },
                            onChecked: function (data, ischecked) {
                                console.log("onChecked ");
                                console.log(JSON.stringify(data));
                            }
                        });
                    }
                }
            });

            tabArr = $B.cloneObjectFn(tabs);
            tabArr[3].actived = true;
            tab4 = new $B["Tabs"]("tab4", {
                style: 'normal',  //plain简约风格，normal常规风格，card卡片风格
                headSize: '105px',
                position: "left",
                animate:true,
                actItemBackColor: '#ffffff',
                actItemFontColor: '#005FFF',
                headerBackColor: '#484B52',
                onClick: function (prs) {
                    console.log(prs);
                },
                tabs: tabArr,
                onLoaded: function (opt, datas) {
                    let el = this;
                    if (opt.dataType === "json") {
                        if (treeObj4) {
                            treeObj4.destroy();
                        }
                        el.innerHTML = "<div><ul/></div>";
                        let ul = el.firstChild.firstChild;
                        treeObj4 = new $B.Tree(ul, {
                            data: datas,
                            url: 'tree.json',    
                            nodeParentIcon: 'fa-folder-empty',//父节点图标关闭状态
                            nodeParentOpenIcon: 'fa-folder-open-empty',      //打开状态图标
                            leafNodeIcon: 'fa-mail-alt',                //子节点图标 
                            chkEmptyIcon: 'fa-check-empty',            //不选
                            chkAllIcon: 'fa-check',            //全选
                            chkSomeIcon: 'fa-minus-squared',              //部分选 ***/                      
                            onClick: function (e) {
                                console.log("on click");
                                console.log(e.data);
                            },
                            onChecked: function (data, ischecked) {
                                console.log("onChecked ");
                                console.log(JSON.stringify(data));
                            }
                        });
                    }
                }
            });
        };

        $B.DomUtils.onDomLoaded(function () {
            pageLoaded();
        });
    </script>
</body>

</html>